/home/web6047/www/cgi-bin/prj/20180707-SVC（Side View Character）/techtree/[A] basic svc/canvas

このファイル: /home/web6047/www/cgi-bin/prj/20180707-SVC（Side View Character）/techtree/[A] basic svc/canvas - snap 20180715.html

1 <!DOCTYPE html>
2 <head>
3 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
4 <title>基本のSVC</title>
5 <script>
6
7 console.clear();
8 console.log( "=============== script ==============" );

9 function $( id ) { return document.getElementById( id ); }

10 var HereDocument = /\/\*\s*([^]*?)\s*\*\//;
11 // usage: var txt = ( function() { /*multiTXT*/ } ).toString().match( HereDocument )[ 1 ];
12
13
14 var cc; //Canvas Context
15
16 //---loading.
17 var images = {
18 red : "red.png",
19 green : "green.png",
20 blue : "blue.png",
21 };
22 var onloadCount = 0;
23 var onloadMax = Object.keys( images ).length + 1;
24 for( var name in images ) {
25 var src = images[ name ];
26 images[ name ] = new Image();
27 images[ name ].onload = onloadx;
28 images[ name ].src = src;
29 }
30 addEventListener( "load", onloadx );

31 function onloadx( e ) {
32 onloadCount++;
33 console.log( onloadCount + "/" + onloadMax );
34 if( onloadCount == onloadMax ) start();
35 }

36 //---/loading.
37

38 function start() {
39
40 canvasEL = $( "canvasELID" );
41 canvas = canvasEL.getContext( '2d' );
42 screenW = canvas.canvas.width;
43 screenH = canvas.canvas.height;
44
45 //(canvas-Special resize / crisp low)
46
47 //各SVC作成
48 with( svc1 = new SVC( "red" ) ) {
49 image = images.red;
50 relativeX = 50;
51 relativeY = 50;
52 offsetX = -41;
53 offsetY = -41;
54 relativeT = 3.14 / 8;
55 }
56 with( svc2 = new SVC( "green" ) ) {
57 image = images.green;
58 relativeX = 118;
59 relativeY = 0;
60 offsetX = -41;
61 offsetY = -41;
62 relativeT = 3.14 / 8;
63 }
64 with( svc3 = new SVC( "blue" ) ) {
65 image = images.blue;
66 relativeX = 118;
67 relativeY = 0;
68 offsetX = -41;
69 offsetY = -41;
70 relativeT = 3.14 / 8;
71 }
72
73 //親子関係
74 svc1.childrenPush( svc2 );
75 svc2.childrenPush( svc3 );
76
77 //描画
78 draw( canvas );
79 }

80 function draw( cc ) {
81 cc.clearRect( 0, 0, cc.canvas.width, cc.canvas.height );
82
83 //グラフ的なガイド線
84 cc.strokeStyle = "gray";
85 cc.beginPath();
86 cc.moveTo( 0, screenH / 2 );
87 cc.lineTo( screenW, screenH / 2 );
88 cc.stroke();
89 cc.beginPath();
90 cc.moveTo( screenW / 2, 0 );
91 cc.lineTo( screenW / 2, screenH );
92 cc.stroke();
93
94 svc1.draw( cc );
95 }

97 function SVC( name ) {
98 this.name = name;
99 this.image = null;
100 this.relativeX = 0; //親から見た位置（原点となる）
101 this.relativeY = 0;
102 this.relativeT = 0; //親から見た回転量(T is theta)
103 this.offsetX = 0; //画像を描く位置（原点からの位置）
104 this.offsetY = 0;
105 this.children = new Array(); //子
106 }

107 SVC.prototype.childrenPush = function( child ) {
108 this.children.push( child );
109 child.parent = this;
110 }

111 SVC.prototype.draw = function( cc ) { //cc is canvas context.
112 console.log( "draw", this.name );
113
114 cc.save();
115 cc.translate( this.relativeX, this.relativeY );
116 cc.rotate( this.relativeT );
117
118 //自分を描画
119 cc.drawImage( this.image, this.offsetX, this.offsetY );
120
121 //子を描画
122 for( var i = 0; i < this.children.length; i++ ) {
123 this.children[ i ].draw( cc );
124 }
125
126 cc.restore();
127 }

128 </script>
129 <style>
130 </style>
131 </head>
132 <body style="
133 background-color : lightgray;
134 ">
135 <canvas id="canvasELID" width="512" height="448" style="
136 display : block;
137 margin : auto;
138 background-color : white;
139 border : solid 4px white;
140 border-radius : 4px;
141 box-shadow : -1px -1px 0px black inset,
142 1px 1px 0px black inset,
143 -1px -1px 0px black,
144 1px -1px 0px black,
145 -1px 1px 0px black,
146 1px 1px 0px black;
147
148 ">There is no canvas.</canvas>
149 <div style="text-align:center;">
150 このプログラムリストはどの行もSVCの基本として必要な行。
151 </div>
152 </body>
153 </html>